<template>
  <div class="questionnaire-designer">
    <h1>问卷设计器</h1>
    <!-- 问卷信息表单 -->
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <el-form :model="questionnaire" label-width="100px" class="questionnaire-form">
      <el-form-item label="问卷标题">
        <el-input v-model="questionnaire.title"></el-input>
      </el-form-item>
      <el-form-item label="问卷描述">
        <el-input type="textarea" v-model="questionnaire.description"></el-input>
      </el-form-item>
    </el-form>
  </ul>

    <!-- 添加问题表单 -->
    <el-form :model="newQuestion" class="new-question-form">
      <el-form-item label="问题">
        <el-input v-model="newQuestion.text" placeholder="问题内容"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="newQuestion.type" placeholder="请选择问题类型">
          <el-option label="问答" value="text"></el-option>
          <el-option label="单选" value="radio"></el-option>
          <el-option label="多选" value="checkbox"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="newQuestion.type !== 'text'" label="选项">
        <el-tag v-for="(option, index) in newQuestion.options" :key="index" closable @close="removeOption(index)">
          {{ option }}
        </el-tag>
        <el-button type="text" @click="showOptionDialog = true">添加选项</el-button>
        <el-button type="text" @click="showChartDialog = true">添加图表</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addQuestion">添加问题</el-button>
      </el-form-item>
    </el-form>

    <!-- 问题列表 -->
    <div class="question-list">
      <div v-for="(question, index) in questionnaire.questions" :key="index" class="question-card">
        <p><strong>{{ index + 1 }}. {{ question.text }}</strong></p>
        <div v-if="question.type === 'radio'">
          <el-radio-group v-model="question.answer">
            <el-radio :label="option" v-for="(option, oIndex) in question.options" :key="oIndex">{{ option }}</el-radio>
          </el-radio-group>
        </div>
        <div v-if="question.type === 'checkbox'">
          <el-checkbox-group v-model="question.answers">
            <el-checkbox :label="option" v-for="(option, oIndex) in question.options" :key="oIndex">{{ option }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="width: 50%">
          <div id="Bie" style="width: 100%;height：200px"></div>
        </div>
        <el-button type="text" @click="removeQuestion(index)">删除问题</el-button>
      </div>
    </div>

    <!-- 图表插入对话框 -->
    <el-dialog v-model="showChartDialog" title="插入图表">
      <div v-for="(data, index) in chartData" :key="index" class="chart-data-item">
        <div>
        <el-button @click="initBie">初始化Bie</el-button>
      </div>
        <el-input v-model="data.name" placeholder="分类名称"></el-input>
        <el-input v-model="data.value" placeholder="值" type="number"></el-input>
        <el-button type="danger" @click="removeChartData(index)">删除</el-button>
      </div>
      <el-button @click="addChartData">添加数据</el-button>
      <el-button type="primary" @click="insertChart">插入图表</el-button>
    </el-dialog>

    <!-- 添加选项对话框 -->
    <el-dialog v-model="showOptionDialog" title="添加选项">
      <div v-for="(option, index) in newQuestion.options" :key="index">
        <el-input v-model="newQuestion.options[index]" placeholder="选项内容"></el-input>
        <el-button type="danger" @click="removeOption(index)">删除</el-button>
      </div>
      <el-button @click="addOption">添加选项</el-button>
      <el-button type="primary" @click="showOptionDialog = false">确定</el-button>
    </el-dialog>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleSubmit">发布问卷</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { reactive, onMounted, nextTick } from 'vue';
import {
  ElInput,
  ElSelect,
  ElOption,
  ElButton,
  ElForm,
  ElFormItem,
  ElDialog,
  ElTag,
  ElRadio,
  ElRadioGroup,
  ElCheckbox,
  ElCheckboxGroup
} from 'element-plus';
import Chart from './Chart.vue'; // Import Chart component
echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, LineChart, PieChart, CanvasRenderer]);
export default {
  components: {
    ElInput,
    ElSelect,
    ElOption,
    ElButton,
    ElForm,
    ElFormItem,
    ElDialog,
    ElTag,
    ElRadio,
    ElRadioGroup,
    ElCheckbox,
    ElCheckboxGroup
  },
  data() {
    return {
      questionnaire: {
        title: '',
        description: '',
        questions: []
      },
      newQuestion: {
        text: '',
        type: 'text',
        options: [],
        answer: '',
        answers: []
      },
      showChartDialog: false,
      chartData: [{ name: '', value: 0 }],
      showOptionDialog: false
    };
  },
  methods: {
    addQuestion() {
      const question = {
        text: this.newQuestion.text,
        type: this.newQuestion.type,
        options: this.newQuestion.type === 'text' ? [] : [...this.newQuestion.options],
        answer: this.newQuestion.type === 'radio' ? '' : [],
        answers: this.newQuestion.type === 'checkbox' ? [] : '',
        chartData: this.newQuestion.type === 'chart' ? [...this.newQuestion.chartData] : []
      };
      this.questionnaire.questions.push(question);
      this.resetNewQuestion();
    },
    removeQuestion(index) {
      this.questionnaire.questions.splice(index, 1);
    },
    addOption() {
      this.newQuestion.options.push('');
    },
    removeOption(index) {
      this.newQuestion.options.splice(index, 1);
    },
    addChartData() {
      this.chartData.push({ name: '', value: 0 });
    },
    removeChartData(index) {
      this.chartData.splice(index, 1);
    },
    insertChart() {
    //  this.newQuestion.chartData = [...this.chartData];
    //  this.showChartDialog = false;
    initBie();
    },
    resetNewQuestion() {
      this.newQuestion.text = '';
      this.newQuestion.type = 'text';
      this.newQuestion.options = [];
      this.newQuestion.answer = '';
      this.newQuestion.answers = [];
      this.newQuestion.chartData = [];
    },
    handleSubmit() {
      /*
      const existingQuestionnaires = JSON.parse(localStorage.getItem('questionnaires')) || [];
      existingQuestionnaires.push(this.questionnaire);
      localStorage.setItem('questionnaires', JSON.stringify(existingQuestionnaires));
      this.$router.push('/');
      */
    },
    initBie(){
      let chartDom = document.getElementById('Bie');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.questionnaire-designer {
  max-width: 800px;
  margin: 20px auto;
}

.questionnaire-form {
  margin-bottom: 20px;
}

.new-question-form {
  margin-bottom: 20px;
}

.question-list {
  margin-bottom: 20px;
}

.question-card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

.chart-data-item {
  display: flex;
  margin-bottom: 10px;
}

.action-buttons {
  text-align: right;
  margin-top: 20px;
}
</style>
